<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<title>飞腾会-FitaClub</title>
<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>
</head>
<!-- end header -->

<body>
    <div class="page-group">
        <div class="page page-current bg-light-gray">
          <header class="bar bar-nav fita-header">
        <a href="javascript:history.back(-1);" class="icon icon-left pull-left"></a>
        <a href="${ctx.host}/cars/search" class="button pull-right">重选</a>
        <h1 class="title">订单确认</h1>
      </header>
      
      
<%--       
      <!-- 可以取消预定 -->
      <c:if test="${order.isCouldCancelBooking() }">
	      <div class="bar bar-footer fita-footer order-button">
	        <a href="javascript:void(0);" data-href="${ctx.host}/shopping/result?type=staying&orderId=${order.id}" class="button staying-button">保留订单</a>
	        <a data-href="${ctx.host}/shopping/orders/${order.id}/paying" data-redirect="${ctx.host}/shopping/result?type=pay&orderId=${order.id}" class="button pay-now">即刻支付</a>
	      </div>
      </c:if>
      
      <c:if test="${!order.isCouldCancelBooking() }">
	     <div class="bar bar-footer fita-footer order-button">
	        <a data-href="${ctx.host}/shopping/orders/${order.id}/paying" data-redirect="${ctx.host}/shopping/result?type=pay&orderId=${order.id}" class="button pay-now" style="width: 100%">即刻支付</a>
	      </div>
      </c:if>
       --%>
      
      <c:if test="${order.type.prepay}">
      	<div class="bar bar-footer fita-footer order-button">
        	<button data-href="${ctx.host}/shopping/orders/${order.id}/paying" data-redirect="${ctx.host}/shopping/result?type=pay&orderId=${order.id}" class="button pay-now" style="width: 100%">即刻支付</button>
   		</div>
      </c:if>  
	
      <c:if test="${order.type.arrivepay}">
	      <div class="bar bar-footer fita-footer order-button">
	        <button data-href="${ctx.host}/shopping/orders/${order.id}/arrive-paying" data-redirect="${ctx.host}/shopping/result-success?&orderId=${order.id}" class="button arrive-pay-now" style="width: 100%">即刻下单</button>
	      </div>
      </c:if>  
      
      <div class="content">
        <div class="card order-info-card">
          <div class="card-content">
            <div class="item" style="position: relative; margin-bottom: .5rem;">
              <div class="clearfix">
                <div class="pull-left"><span class="label">取车：</span><div class="location">${pickupLocation.cityName}</div></div>
                <p class="pull-right no-margin"><fmt:formatDate value="${order.pickupDate}" pattern="yyyy-MM-dd HH:mm" /> </p>
              </div>
              <div class="detail" style="margin-top: .25rem;padding-left: 2.1rem;display: block; max-width: 100%; font-size: .6rem; line-height: 1.3;">
                <p>${pickupLocation.name}</p>
                <p>${pickupLocation.addressOne}</p>
                <p>TEL:&nbsp;${pickupLocation.phone}</p>
                  <%-- <p>${pickupLocation.addressTwo}</p> --%>
              </div>
              <div class="icon-layout" style="position: absolute; top: 50%; left: .35rem; margin-top: -.25rem;">
	              <span class="iconfont iconfont-shophours" data-work = "pickupLocation" style="font-size: 1rem;"></span>
	            </div>
            </div>
            <div class="item" style="position: relative;">
              <div class="clearfix">
                <div class="pull-left">
                  <span class="label">还车：</span><div class="location">${returnLocation.cityName}</div>
                </div>
                <p class="pull-right no-margin"><fmt:formatDate value="${order.returnDate}" pattern="yyyy-MM-dd HH:mm" /></p>
              </div>
              <div class="detail" style="margin-top: .25rem;padding-left: 2.1rem;display: block; max-width: 100%; font-size: .6rem; line-height: 1.3;">
                <p>${returnLocation.name}</p>
                <p>${returnLocation.addressOne}</p>
                <p>TEL:&nbsp;${returnLocation.phone}</p>
              </div>
              <div class="icon-layout" style="position: absolute; top: 50%; left: .35rem; margin-top: -.25rem;">
                <span class="iconfont iconfont-shophours" data-work = "pickupLocation" style="font-size: 1rem;"></span>
	            </div>
            </div>
              <%-- <div class="item" style="position: relative; margin-bottom: .5rem;">
                <span class="label">取车：</span>
                <div class="location">${pickupLocation.cityName}</div>
                <div class="detail" style="display: block; width: 100%;">
                  <p>${pickupLocation.name}</p><p><fmt:formatDate value="${order.pickupDate}" pattern="yyyy-MM-dd HH:mm" /> </p>
                  <p style="margin: 0 0 .25rem;">${pickupLocation.phone}</p>
                  <p>${pickupLocation.addressOne}</p>
                  <p>${pickupLocation.addressTwo}</p>
                </div>
                
                <div class="icon-layout" style="position: absolute; top: 50%; right: .5rem; margin-top: -1rem;">
	                <span class="iconfont iconfont-shophours" data-work = "pickupLocation" style="font-size: 1.5rem;"></span>
	              </div>
              </div>
              <div class="item" style="position: relative; margin-bottom: .5rem;">
                <span class="label">还车：</span>
                <div class="location">${returnLocation.cityName}</div>
                <div class="detail" style="display: block; width: 100%;">
                  <p>${returnLocation.name}</p><p><fmt:formatDate value="${order.returnDate}" pattern="yyyy-MM-dd HH:mm" /></p>
                  <p style="margin: 0 0 .25rem;">${returnLocation.phone}</p>
                  <p>${returnLocation.addressOne}</p>
                  <p>${returnLocation.addressTwo}</p>
                </div>
                <div class="icon-layout" style="position: absolute; top: 50%; right: .5rem; margin-top: -1rem;">
	                <span class="iconfont iconfont-shophours" data-work = "returnLocation" style="font-size: 1.5rem;"></span>
	              </div>
              </div> --%>
          </div>
        </div>
        <div class="list cars-list-layout">
          <div class="card fita-card">
            <div class="card-content">
              <div class="card-content-inner">
                <a href="">
                  <div class="car-title">
                  <c:choose>
                      <c:when test="${persist.modelGroups[order.details.carInfo.modelName] != null}">
                         ${persist.modelGroups[order.details.carInfo.modelName].chineseName}
                      </c:when>
                      <c:otherwise>
                        ${order.details.carInfo.modelName}
                      </c:otherwise>
                    </c:choose>
                  </div>
                  <div class="row no-gutter">
                    <div class="col-66 cars-type">
                      <c:choose>
                      <c:when test="${persist.modelGroups[order.details.carInfo.modelName] != null}">
                         <img src="${cloudContext.domain}/${persist.modelGroups[order.details.carInfo.modelName].picture}"/>
                      </c:when>
                      <c:otherwise>
                        <img src="${order.details.carInfo.picture}"/>
                      </c:otherwise>
                    </c:choose>
                      <p>
                      ${persist.getVehicleSize(order.details.carInfo.modelCodeClass).chineseName}/
                      ${persist.getVehicleCategory(order.details.carInfo.categoryCode).chineseName}/
                      ${order.details.carInfo.transmissionType  eq 'MANUAL' ? '手动' : '自动'}/
                      ${order.details.carInfo.baggageQuantity}行李/
                      ${order.details.carInfo.passengerQuantity}座位/
                      ${order.details.carInfo.airConditionIn ? '含空调' : '无空调'}/
                      ${order.details.carInfo.modelCodeType eq 'B' ? '2门' : car.modelCodeType eq 'C' ? '2或4门' : '4门或5门'}</p>
                    </div>
                    <div class="col-33 price-box" style="margin-bottom: 1.25rem;margin-top:.75rem;">
                      <c:choose>
                        <c:when test="${set.payType.arrivepay}">
                          <c:set var="exchangeRate" value="${persist.exchangeRate(order.currencyCode)}"/>
                          <div class="item" style="margin-bottom: 1.25rem;">
                            <p>官方零售价：</p>
                            <p class="price"><span style="font-size: .75rem;">${exchangeRate.currencySymbol}</span><fmt:formatNumber value="${order.retailAmount/100}" type="number" maxFractionDigits="2" pattern="0.00"/></p>
                          </div>
                          <div class="item" style="margin-bottom: 1.25rem;">
                            <p>返佣：</p>
                            <p class="price current-price"><span style="font-size: .75rem;">${exchangeRate.currencySymbol}</span><fmt:formatNumber value="${order.agentCommission}" type="number" maxFractionDigits="2" pattern="0.00"/></p>
                          </div>
                        </c:when>
                        <c:otherwise>
                          <div class="item" style="margin-bottom: 1.25rem;">
                            <p>官方零售价：</p>
                            <p class="price"><span style="font-size: .75rem;">￥</span><fmt:formatNumber value="${order.retailAmount/100}" type="number" maxFractionDigits="0"/>.00</p>
                          </div>
                          <div class="item" style="margin-bottom: 1.25rem;">
                            <p>${set.payType.floatPrepay || set.payType.dynamicPrepay ? '浮动' : '常规'}价：</p>
                            <p class="price current-price"><span style="font-size: .75rem;">￥</span><fmt:formatNumber value="${order.cnyPayPrice}" type="number" maxFractionDigits="2" pattern="0.00" /></p>
                          </div>
                        </c:otherwise>
                      </c:choose>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
        
        <div class="row no-gutter order-details">
          <div class="col-33">
            <p class="name">品牌</p>
            <div class="text">${supplier.chineseName}</div>
          </div>
          <div class="col-33">
            <p class="name">国家</p>
            <div class="text">${country.chineseName}</div>
          </div>
          <div class="col-33">
            <p class="name">预付/到付</p>
            <div class="text">${order.type.description}</div>
          </div>
        </div>
        
        <div class="user-info shopping-order-layout">
          <div class="box">
            <div class="item">
              <span>套餐：</span>
              <input type="text" value="${set.categoty.chineseName}" readonly name=""> 
            </div>
            <div class="item">
              <span>姓氏<small class="color-gray">&nbsp;(拼音)</small>：</span>
              <input type="text" value="${order.details.customerInfo.surname}" readonly name=""> 
            </div>
            <div class="item">
              <span>名字<small class="color-gray">&nbsp;(拼音)</small>：</span>
              <input type="text" value="${order.details.customerInfo.name}" readonly name=""> 
            </div>
            <div class="item">
              <span>手机号：</span>
              <input type="text" value="${order.details.customerInfo.mobile}" readonly  name=""> 
            </div>
            <div class="item">
              <span>邮箱：</span>
              <input type="text" value="${order.details.customerInfo.email}" readonly name=""> 
            </div>
            <div class="item">
              <span>年龄：</span>
              <input type="text" value="${order.details.customerInfo.age}" readonly name=""> 
            </div>
            <div class="item">
              <span>航班号：</span>
              <input type="text" value="${order.details.customerInfo.flightNumber}" readonly name=""> 
            </div>
          </div>
          <div class="product-detail">
            <c:if test="${not empty include || not empty set.includeContentMap}">
              <div class="fita-block-title">
                <p class="no-margin">价格包含：</p>
                <span class="pull-right iconfont iconfont-down-arrow"></span>
              </div>
              <div class="box">
                <c:forEach var="includeContent" items="${set.includeContentMap.values()}">
                  <div class="item" style="padding-left: .25rem;">${includeContent}</div>
                </c:forEach>  
                <c:forEach var="includeFee" items="${include}">
                  <div class="item" style="padding-left: .25rem;">${includeFee.description}<%-- (${includeFee.currencyCode} ${includeFee.amount}) --%></div>
                </c:forEach>
              </div>
            </c:if>
            <c:if test="${not empty unInclude}">
              <div class="fita-block-title">
                <p class="no-margin">价格不含：(以下费用不计入总价，需在门店另行支付)</p>
                <span class="pull-right iconfont iconfont-down-arrow"></span>
              </div>
              <div class="box">
                <c:forEach var="unIncludeFee" items="${unInclude}">
                  <div class="item" style="padding-left: .25rem;">${unIncludeFee.description}(${unIncludeFee.currencyCode} ${unIncludeFee.amount})</div>
                </c:forEach>
              </div>
            </c:if>
            <div class="fita-block-title">
              <p class="no-margin">增值服务：(以下费用不计入总价，需在门店另行支付)</p>
              <span class="pull-right iconfont iconfont-down-arrow"></span>
            </div>
            <div class="box">
              <c:if test="${not empty order.details.carInfo.specialEquipments}">
                <c:forEach var="equipment" items="${equipments}">
                  <div class="item" style="padding-left: .25rem;">${equipment.specialEquipment.chineseName}
                    <c:if test="${not empty equipment.otherPrice}">（${equipment.otherPrice}）</c:if>
                  </div>
                </c:forEach>
              </c:if>
            </div>
          
          <div style="margin: 1rem .5rem;font-weight: bold; font-size: .65rem; color: #262626;">
            <!-- <label>
              <input type="checkbox" name="" checked value="" style="display: inline-block;"><span style="display: inline-block;margin-left: .25rem;vertical-align: top;">我需要开具发票</span>
            </label> -->
            <div style="margin: .25rem 0 .25rem 1rem; line-height: 1;font-weight: bold; font-size: .6rem; color: #262626;">
                <p class="no-margin" style="margin-bottom: .25rem;">此预约可在 <fmt:formatDate value="${order.cancelEndDate}" pattern="yyyy/MM/dd HH:mm"/>之前免费取消</p>
                <p class="no-margin">订单一经确认，未按指定时间取车，将会收取行政费。</p>
              </div>
              <label>
              <input type="checkbox" name="agree" value="" style="display: inline-block;"><span style="display: inline-block;margin-left: .25rem;vertical-align: top;">我已经阅读并接受取消条款</span>
            </label>
          </div>
        </div>
      </div>
  
            <!-- <div class="content">
                <p>订单确认页</p>
                <a ctx.host="/orders-info-result">立即下单</a> 
                <a ctx.host="/orders-info-result">保留订单</a> 
                <a>立即支付</a>
            </div> -->
        </div>
    </div>
    <%@ include file="/WEB-INF/include/script.jsp"%>
    <d:resource type="script" root="${ctx.resource}/build" src="js/page/shopping/order-ask.js" />
  <script type="text/javascript">
    require(['page/shopping/order-ask'], function(page) {
      page.init({
        orderId: "${order.id}",
	    pickupLocationId: "${pickupLocation.id}",
	    returnLocationId: "${returnLocation.id}",
      })
    })
  </script>
</body>
</html>